<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    /* * {
      margin: 0;
      padding: 0;
    } */
    /* li:hover {
      font-weight: bold;
    } */
  </style>
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <script>
    tree.addEventListener('click', (e) => {
      const target = e.target
      if (tree.contains(target)) {
        const ulEl = target.querySelector('ul')
        if (ulEl) {
          ulEl.hidden = !ulEl.hidden
        }
      }
    })
  </script>
</body>
</html>